<template>
  <el-card>
    <div slot="header" class="df jcsb aic">
      <span>商品分类</span>
      <el-button type="primary" @click="addSortHandle">添加分类</el-button>
    </div>
    <!-- table表格 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
          <el-input v-else size="mini" v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            :disabled="!scope.row.isEdit"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            style="margin-right: 5px"
            size="mini"
            @click="handleEdit(scope.row)"
            :type="scope.row.isEdit ? 'success' : 'default'"
          >
            {{ scope.row.isEdit ? "完成" : "编辑" }}
          </el-button>

          <el-button size="mini" @click="handleDel(scope.row)" type="danger">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑分类弹出框 -->
    <el-dialog title="添加分类" width="40%" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="form.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <!-- 作用域插槽 -->
          <el-switch
            v-model="form.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitDataHandle">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      class="mt20"
      :page-size="pageSize"
      :total="total"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      background
      layout="total,prev,pager,next,jumper"
    ></el-pagination>
  </el-card>
</template>

<script>
import {
  goodsCatelist,
  goodsEditcate,
  goodsDelcate,
  goodsAddcate,
} from "@/api/goods";
import { Message } from "element-ui";

//数据先行
export default {
  data() {
    return {
      //分类数据
      tableData: [],
      //分页数据
      currentPage: 1,
      pageSize: 3,
      total: 0,
      //dialog弹出框开关
      dialogFormVisible: false,
      //表单数据
      form: {
        cateName: "",
        state: false,
      },
    };
  },
  //方法
  methods: {
    //每条页数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    //当前页改变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    //获取数据方法
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //发送请求
      let res = await goodsCatelist({
        currentPage,
        pageSize,
      });
      //解构数据
      let { total, data } = res.data;
      //修改数据
      data.forEach((v) => {
        //把state转换为布尔值
        v.state = v.state === 1 ? true : false;
        //添加一个字段 是否可编辑
        v.isEdit = false;
      });

      // let temp = data.map(v => {
      //   return {
      //     ...v,
      //     state: v.state === 1 ? true : false,
      //   }
      // })

      //数据赋值
      this.total = total;
      this.tableData = data;

      //如果获取data为[] 且currentPage>1 退回上一页
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getData();
      }
    },
    //改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //编辑
    async handleEdit(row) {
      //把可编辑状态取反
      row.isEdit = !row.isEdit;
      //发送请求
      if (!row.isEdit) {
        // 发送请求
        let res = await goodsEditcate({
          ...row,
          state: row.state ? 1 : 0,
        });
      }
    },
    //删除
    handleDel(row) {
      this.$confirm("您确定要删除吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await goodsDelcate({ id: row.id });
          console.log(row.id);
          let { code, msg } = res.data;

          if (code === 0) {
            this.getData();
          } else {
            Message.error(mag);
          }
        })
        .catch(() => {});
    },
    addSortHandle() {
      this.dialogFormVisible = true;
    },
    //提交数据按钮
    async SubmitDataHandle() {
      //ajax参数需要 0 1 所以要把布尔转成Numberx
      //console.log(this.form);
      let formClone = { ...this.form };
      formClone.state = formClone.state ? 1 : 0;

      let res = await goodsAddcate({
        cateName: formClone.cateName,
        state: formClone.state,
      });

      if (res.data.code === 0) {
        this.dialogFormVisible = false;
        this.getData();
      }
    },
  },
  //初始化发送请求
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.goods-cate {
  padding: 20px;
}
</style>
